<template>
	<div class="top">
		<p>申请调课</p>
		<span style="cursor: pointer;" @click="goBack">返回</span>
	</div>
	 <el-form
	    ref="ruleFormRef"
	    :model="formData"
	    :rules="rules"
	    label-width="auto"
	    class="demo-ruleForm"
	    status-icon
		hide-required-asterisk=true
	  >
		<el-row justify="center">
		    <el-col :span="8">
				<el-form-item label="申请老师:" prop="telname" >
				    <el-input v-model="formData.telname" style="width: 205px;" disabled />
				</el-form-item>
				<el-form-item label="所调课程:" prop="subId">
					<el-select v-model="formData.subId" placeholder="请选择" style="width: 205px;" @change="changeClass(formData.subId)">
						<el-option v-for="x in classList" :label="x.subName" :value="x.subId" />
					</el-select>
				</el-form-item>
				<el-form-item label="所调班级:" prop="clazzId">
					<el-select v-model="formData.clazzId" placeholder="请选择班级(先选课程)" style="width: 205px;" @change="getOldTime">
						<el-option v-for="x in twoClassList" :label="x.clazzName" :value="x.clazzId" />
					</el-select>
				</el-form-item>
				<el-form-item label="原上课时间:" prop="oldTime">
					 <el-select v-model="formData.oldTime" placeholder="请选择原来上课时间" style="width: 205px;">
					 	<el-option v-for="x in oldtimeList" :label="x.time" :value="x.time" />
					 </el-select>
				</el-form-item>
				<el-form-item label="调课时间:" prop="newTime">
					 <el-select v-model="formData.newTime" placeholder="请选择调课时间" style="width: 205px;">
					 	<el-option v-for="x in options" :label="x.label" :value="x.value" />
					 </el-select>
				</el-form-item>
			</el-col>
		    <el-col :span="8">
				<el-form-item label="申请日期:" prop="createTime">
					<el-input
						v-model="formData.createTime"
						type="text"
						style="width: 205px;"
						disabled
					/>
				</el-form-item>
				<el-form-item label="审批人:">
				    <el-select v-model="formData.userId" placeholder="请选择" style="width: 205px;" disabled>
				    	<el-option label="Zone one" value="shanghai" />
				    </el-select>
				</el-form-item>
			</el-col>
		  </el-row>
		<div class="bt">
			<el-button class="searchBtn" type="info" @click="submitForm(ruleFormRef)">
				确定
			</el-button>
			<el-button class="cancelBtn" type="info" @click="resetForm(ruleFormRef)">取消</el-button>
		</div>
	  </el-form>
</template>

<script setup lang="ts">
	import {reactive,ref,onMounted,defineEmits,defineProps} from 'vue'
	import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
	import {applicationClass,InquireClass,OldTime,AddChangeClass} from '@/api/zzx'
	import { ElMessage } from 'element-plus'
	let emit=defineEmits(["back"])
	let prop=defineProps(["reaId"])
	let reaId=prop.reaId
	let userId=sessionStorage.getItem("userId")
	//console.log("userId",userId)
	//时间
	let date = new Date();
	let dates = date.toLocaleDateString()
	let nowTime = dates.replaceAll("/", "-")
	//console.log("nowTime",nowTime)
	let classList=ref([])
	let teaId=ref()
	//调取申请接口
	const application=async ()=>{
		let res=await applicationClass({
			userId:userId
		})
		console.log("申请",res)
		formData.telname=res.teas[0].teaName
		classList.value=res.teas[0].subs
		teaId.value=res.teas[0].teaId
	}
	application()
	//课程改变时调取班级列表
	let twoClassList=ref([])
	const changeClass=async (v)=>{
		//console.log(formData.subId,v)
		let res=await InquireClass({
			subId:v,
			teaId:teaId.value
		})
		console.log("课程改变时调取班级列表",res)
		twoClassList.value=res[0].clazzes
	}
	//获取原来上课时间
	let oldtimeList=ref([])
	const getOldTime=async ()=>{
		let res=await OldTime({
			subId:formData.subId,
			teaId:teaId.value,
			clazzId:formData.clazzId
		})
		console.log("原来上课时间",res)
		oldtimeList.value=res
	}
	let options=[
	        {
	            value:'周1第1节课',
	            label:'周1第1节课'
	        },
	        {
	            value:'周1第2节课',
	            label:'周1第2节课'
	        },
	        {
	            value:'周1第3节课',
	            label:'周1第3节课'
	        },
	        {
	            value:'周1第4节课',
	            label:'周1第4节课'
	        },
	        {
	            value:'周1第5节课',
	            label:'周1第5节课'
	        },
	        {
	            value:'周2第1节课',
	            label:'周2第1节课'
	        },
	        {
	            value:'周2第2节课',
	            label:'周2第2节课'
	        },
	        {
	            value:'周2第3节课',
	            label:'周2第3节课'
	        },
	        {
	            value:'周2第4节课',
	            label:'周2第4节课'
	        },
	        {
	            value:'周2第5节课',
	            label:'周2第5节课'
	        },
	        {
	            value:'周3第1节课',
	            label:'周3第1节课'
	        },
	        {
	            value:'周3第2节课',
	            label:'周3第2节课'
	        },
	        {
	            value:'周3第3节课',
	            label:'周3第3节课'
	        },
	        {
	            value:'周3第4节课',
	            label:'周3第4节课'
	        },
	        {
	            value:'周3第5节课',
	            label:'周3第5节课'
	        },
	        {
	            value:'周4第1节课',
	            label:'周4第1节课'
	        },
	        {
	            value:'周4第2节课',
	            label:'周4第2节课'
	        },
	        {
	            value:'周4第3节课',
	            label:'周4第3节课'
	        },
	        {
	            value:'周4第4节课',
	            label:'周4第4节课'
	        },
	        {
	            value:'周4第5节课',
	            label:'周4第5节课'
	        },
	        {
	            value:'周5第1节课',
	            label:'周5第1节课'
	        },
	        {
	            value:'周5第2节课',
	            label:'周5第2节课'
	        },
	        {
	            value:'周5第3节课',
	            label:'周5第3节课'
	        },
	        {
	            value:'周5第4节课',
	            label:'周5第4节课'
	        },
	        {
	            value:'周5第5节课',
	            label:'周5第5节课'
	        },
	        {
	            value:'周6第1节课',
	            label:'周6第1节课'
	        },
	        {
	            value:'周6第2节课',
	            label:'周6第2节课'
	        },
	        {
	            value:'周6第3节课',
	            label:'周6第3节课'
	        },
	        {
	            value:'周6第4节课',
	            label:'周6第4节课'
	        },
	        {
	            value:'周6第5节课',
	            label:'周6第5节课'
	        },
	        {
	            value:'周日第1节课',
	            label:'周日第1节课'
	        },
	        {
	            value:'周日第2节课',
	            label:'周日第2节课'
	        },
	        {
	            value:'周日第3节课',
	            label:'周日第3节课'
	        },
	        {
	            value:'周日第4节课',
	            label:'周日第4节课'
	        },
	        {
	            value:'周日第5节课',
	            label:'周日第5节课'
	        },
	    ]
	//获取详情接口
	
	//点击返回
	
	//点击返回
	const goBack=()=>{
		emit("back")
	}
	interface RuleForm {
	  telname:string,
	  clazzId:string,
	  subId:string,
	  oldTime:string,
	  newTime:string,
	  createTime:string,
	  userId:string
	}
	let formData=reactive({
		telname:"",
		clazzId:'',
		subId:'',
		oldTime:"",
		newTime:"",
		createTime:nowTime,
		userId:""
	})
	const ruleFormRef = ref<FormInstance>()
	const rules = reactive<FormRules<RuleForm>>({
		clazzId: [{ required: true, message: "所调班级不能为空", trigger: "blur" }],
		subId: [{ required: true, message: "所调课程不能为空", trigger: "blur" }],
		oldTime: [{ required: true, message: "调课时间不能为空", trigger: "blur" }],
		newTime: [{ required: true, message: "原上课时间不能为空", trigger: "blur" }]
	})
	//点击提交
	const submitForm = async (formEl: FormInstance | undefined) => {
	  if (!formEl) return
	  await formEl.validate(async (valid, fields) => {
	    if (valid) {
	      // console.log('submit!')
		  //添加调课
		  let res=await AddChangeClass({
			  teaId:2,
			  oldTime:formData.oldTime,
			  clazzId:formData.clazzId,
			  subId:formData.subId,
			  newTime:formData.newTime,
			  createTime:formData.createTime,
			  userId:userId
		  })
		  //console.log("申请调课",res)
		  if(res==undefined){
			  ElMessage({
			      message: '申请成功',
			      type: 'success',
			    })
		  }
		  emit("back")
	    } 
	  })
	}
	//点击取消
	const resetForm=(formData)=>{
		formData.resetFields()
		application()
	}
</script>

<style scoped lang="less">
	.top{
		display: flex;
		justify-content: space-between;
		align-items: center;
		p{
			font-size: 21px;
			font-weight: 600;
		}
		span{
			font-size: 17px;
		}
	}
	
	.demo-ruleForm{
		margin-top: 30px;
	}
	
	.bt{
		width: 25%;
		margin: 40px auto;
		display: flex;
		justify-content: space-between;
	}
	.cancelBtn{
	    background-color: #999999;
		width: 80px;
	}
	.searchBtn{
		background-color: #106ab1;
		border: none;
		width: 80px;
	}
</style>